<!-- 这是首页homepage里的数据统计组件 -->
<template>
  <h1 style="text-align: center">数据统计</h1>

  <el-row justify="space-evenly" style="margin-bottom: 50px">
    <el-col :span="7">
      <el-card shadow="always" class="box-card">
        <p style="color: #2563eb">50+</p>
        <div>已毕业学生</div>
      </el-card>
    </el-col>
    <el-col :span="7">
      <el-card shadow="always" class="box-card">
        <p style="color: #22c55e">50+</p>
        <div>已发表论文数量</div>
      </el-card>
    </el-col>
    <el-col :span="7">
      <el-card shadow="always" class="box-card">
        <p style="color: #a855f7">50+</p>
        <div>科研项目</div>
      </el-card>
    </el-col>
  </el-row>

  <el-divider />

  <el-row jusitfy="space-evenly" style="margin-top: 60px">
    <el-col :span="10" :offset="1">
      <el-card shadow="always" style="border-radius: 20px; height: 480px">
        <div class="award-section">
          <h3 class="award-title">🏆 获奖情况</h3>
          <el-timeline>
            <el-timeline-item timestamp="2021年" type="success">
              <el-tag type="success" effect="dark">教学</el-tag>
              北京市高等学校教学名师奖
            </el-timeline-item>
            <el-timeline-item timestamp="2020年" type="warning">
              <el-tag type="warning">课程</el-tag>
              《生产计划与控制》入选国家级一流本科课程
            </el-timeline-item>
            <el-timeline-item timestamp="2019年" type="info">
              <el-tag type="info">课程</el-tag>
              《生产计划与控制》入选北京市优质本科课程
            </el-timeline-item>
            <el-timeline-item timestamp="2015年" type="primary">
              <el-tag type="primary">科研</el-tag>
              农业机械科学技术奖二等奖
            </el-timeline-item>
            <el-timeline-item timestamp="2012年" type="danger">
              <el-tag type="danger">教学</el-tag>
              国家级教学成果奖二等奖
            </el-timeline-item>
            <el-timeline-item timestamp="2010年" color="#E6A23C">
              <el-tag type="success">教学</el-tag>
              北京市教学成果奖一等奖
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
    </el-col>
    <el-col :span="10" :offset="2">
      <el-card shadow="always" style="border-radius: 20px; height: 480px">
        <div ref="chartContainer" style="width: 100%; height: 480px"></div>
      </el-card>
    </el-col>
  </el-row>

  <!-- 地理位置分布图 -->
  <el-divider />
  <el-col :span="22" :offset="1">
    <div
      ref="chartRef"
      class="map-container"
      style="width: 100%; height: 600px"
    ></div>
  </el-col>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onUnmounted } from "vue";
import chinaMap from "@/assets/china.json";
import api from "@/utils/api"; // 你封装的 axios 实例

const chartContainer = ref(null); // 饼图容器
const chartRef = ref(null); // 地图容器

let pieChart = null;
let mapChart = null;

// 初始化饼图
const initChart = (jobtypeData) => {
  if (!chartContainer.value) return;
  if (!pieChart) {
    pieChart = echarts.init(chartContainer.value);
  }

  const option = {
    title: {
      text: "毕业生工作去向数据",
      subtext: "数据来源：数据库",
      left: "center",
    },
    tooltip: { trigger: "item" },
    legend: { orient: "vertical", left: "left" },
    series: [
      {
        name: "工作去向",
        type: "pie",
        radius: "50%",
        data: jobtypeData, // ✅ 动态数据
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  pieChart.setOption(option);
};

// 初始化地图
const initChina = (workplaceData) => {
  if (!chartRef.value) return;
  if (!mapChart) {
    mapChart = echarts.init(chartRef.value);
  }

  echarts.registerMap("china", chinaMap);

  const option = {
    title: {
      text: "课题组成员分布图",
      subtext: "以省为单位",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>人数: {c}",
    },
    visualMap: {
      min: 0,
      max: Math.max(...workplaceData.map((d) => d.value)) + 5,
      left: "left",
      bottom: "10%",
      text: ["人数多", "人数少"],
      inRange: { color: ["#e0f3f8", "#74add1", "#4575b4"] },
    },
    series: [
      {
        type: "map",
        map: "china",
        roam: true,
        zoom: 1.2, // 初始缩放比例，>1 放大，<1 缩小
        center: [105, 35], // 初始中心点，经纬度，大概是中国的中心
        scaleLimit: { min: 1, max: 1.5 }, // 限制缩放
        label: { show: false },
        data: workplaceData, // ✅ 动态数据
      },
    ],
  };

  mapChart.setOption(option);
};

// 获取数据并渲染图表
const fetchStats = async () => {
  try {
    const res = await api.get("profile/stats");
    const { workplace_data, jobtype_data } = res.data;

    initChart(jobtype_data);
    initChina(workplace_data);
  } catch (err) {
    console.error("获取统计数据失败:", err);
    initChart([
      {
        name: "高校",
        value: 2,
      },
      {
        name: "国企",
        value: 1,
      },
      {
        name: "未知",
        value: 1,
      },
      {
        name: "未知",
        value: 1,
      },
      {
        name: "互联网",
        value: 1,
      },
      {
        name: "深造",
        value: 1,
      },
    ]);
    initChina([
      {
        name: "北京市",
        value: 3,
      },
      {
        name: "陕西省",
        value: 1,
      },
      {
        name: "未知",
        value: 1,
      },
      {
        name: "未知",
        value: 1,
      },
      {
        name: "山东省",
        value: 1,
      },
    ]);
  }
};

// 生命周期钩子
onMounted(() => {
  fetchStats();
});

onUnmounted(() => {
  if (pieChart) {
    pieChart.dispose();
    pieChart = null;
  }
  if (mapChart) {
    mapChart.dispose();
    mapChart = null;
  }
});
</script>
<style scoped>
.box-card {
  border-radius: 12px;
  height: 130px;
}
.box-card p {
  font-size: 40px;

  /* line-height: 150px; */
  font-weight: bold;
  margin: 0;
}
.map-container {
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.award-section {
  width: 100%;
  height: 400px;
}

.award-title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #303133;
}
</style>
